<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Admin Template by www.865171.cn</title>
		<meta name="description" content="Administry - Admin Template by www.865171.cn" />
		<meta name="keywords" content="Admin,Template" />
		<!-- Favicons -->
		<link rel="shortcut icon" type="image/png" HREF="img/favicons/favicon.png"/>
		<link rel="icon" type="image/png" HREF="img/favicons/favicon.png"/>
		<link rel="apple-touch-icon" HREF="img/favicons/apple.png" />
		<!-- Main Stylesheet -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<!-- Colour Schemes
		Default colour scheme is blue. Uncomment prefered stylesheet to use it.
		<link rel="stylesheet" href="css/brown.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/gray.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/green.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/pink.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/red.css" type="text/css" media="screen" />
		-->
		<!-- Your Custom Stylesheet -->
		<link rel="stylesheet" href="css/custom.css" type="text/css" />
		<!--swfobject - needed only if you require <video> tag support for older browsers -->
		<script type="text/javascript" SRC="js/swfobject.js"></script>
		<!-- jQuery with plugins -->
		<script type="text/javascript" SRC="js/jquery-1.4.2.min.js"></script>
		<!-- Could be loaded remotely from Google CDN : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
		<script type="text/javascript" SRC="js/jquery.ui.core.min.js"></script>
		<script type="text/javascript" SRC="js/jquery.ui.widget.min.js"></script>
		<script type="text/javascript" SRC="js/jquery.ui.tabs.min.js"></script>
		<!-- jQuery tooltips -->
		<script type="text/javascript" SRC="js/jquery.tipTip.min.js"></script>
		<!-- Superfish navigation -->
		<script type="text/javascript" SRC="js/jquery.superfish.min.js"></script>
		<script type="text/javascript" SRC="js/jquery.supersubs.min.js"></script>
		<!-- jQuery popup box -->
		<script type="text/javascript" SRC="js/jquery.nyroModal.pack.js"></script>
		<!-- jQuery form validation -->
		<script type="text/javascript" SRC="js/jquery.validate_pack.js"></script>
		<!-- Internet Explorer Fixes -->
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" media="all" href="css/ie.css"/>
		<script src="js/html5.js"></script>
		<![endif]-->
		<!--Upgrade MSIE5.5-7 to be compatible with MSIE8: http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js -->
		<!--[if lt IE 8]>
		<script src="js/IE8.js"></script>
		<![endif]-->
		<script type="text/javascript">
			$(document).ready(function() {

				/* setup navigation, content boxes, etc... */
				Administry.setup();

				/* progress bar animations - setting initial values */
				Administry.progress("#progress1", 1, 6);

				// validate form on keyup and submit
				var validator = $("#sampleform").validate({
					rules : {
						firstname : "required",
						lastname : "required",
						username : {
							required : true,
							minlength : 2
						},
						password : {
							required : true,
							minlength : 5
						},
						password_confirm : {
							required : true,
							minlength : 5,
							equalTo : "#password"
						},
						email : {
							required : true,
							email : true
						},
						dateformat : "required",
						terms : "required"
					},
					messages : {
						firstname : "Enter your firstname",
						lastname : "Enter your lastname",
						username : {
							required : "Enter a username",
							minlength : jQuery.format("Enter at least {0} characters")
						},
						password : {
							required : "Provide a password",
							rangelength : jQuery.format("Enter at least {0} characters")
						},
						password_confirm : {
							required : "Repeat your password",
							minlength : jQuery.format("Enter at least {0} characters"),
							equalTo : "Enter the same password as above"
						},
						email : {
							required : "Please enter a valid email address",
							minlength : "Please enter a valid email address"
						},
						dateformat : "Choose your preferred dateformat",
						terms : " "
					},
					// the errorPlacement has to take the layout into account
					errorPlacement : function(error, element) {
						error.insertAfter(element.parent().find('label:first'));
					},
					// specifying a submitHandler prevents the default submit, good for the demo
					submitHandler : function() {
						alert("Data submitted!");
					},
					// set new class to error-labels to indicate valid fields
					success : function(label) {
						// set &nbsp; as text for IE
						label.html("&nbsp;").addClass("ok");
					}
				});

				// propose username by combining first- and lastname
				$("#username").focus(function() {
					var firstname = $("#firstname").val();
					var lastname = $("#lastname").val();
					if (firstname && lastname && !this.value) {
						this.value = firstname + "." + lastname;
					}
				});

			});
		</script>
	</head>
	<body>
		<!-- Header -->
		<header id="top">
			<div class="wrapper">
				<!-- Title/Logo - can use text instead of image -->
				<div id="title"><img SRC="img/logo.png" alt="Administry" /><!--<span>Administry</span> demo-->
				</div>
				<!-- Top navigation -->
				<div id="topnav">
					<a href="#"><img class="avatar" SRC="img/user_32.png" alt="" /></a>
					Logged in as <b>Admin</b>
					<span>|</span><a href="#">Settings</a>
					<span>|</span><a href="#">Logout</a>
					<br />
					<small>You have <a href="#" class="high"><b>1</b> new message!</a></small>
				</div>
				<!-- End of Top navigation -->
				<!-- Main navigation -->
				<nav id="menu">
					<ul class="sf-menu">
						<li>
							<a HREF="dashboard.html">Dashboard</a>
						</li>
						<li>
							<a HREF="styles.html">Styles</a>
							<ul>
								<li>
									<a HREF="styles.html">Basic Styles</a>
								</li>
								<li>
									<a href="#">Sample Pages...</a>
									<ul>
										<li>
											<a HREF="samples-files.html">Files</a>
										</li>
										<li>
											<a HREF="samples-products.html">Products</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a HREF="tables.html">Tables</a>
						</li>
						<li class="current">
							<a HREF="forms.html">Forms</a>
						</li>
						<li>
							<a HREF="graphs.html">Graphs</a>
						</li>
					</ul>
				</nav>
				<!-- End of Main navigation -->
				<!-- Aside links -->
				<aside>
					<b>English</b> &middot; <a href="#">Spanish</a> &middot; <a href="#">German</a>
				</aside>
				<!-- End of Aside links -->
			</div>
		</header>
		<!-- End of Header -->
		<!-- Page title -->
		<div id="pagetitle">
			<div class="wrapper">
				<h1>Form examples</h1>
				<!-- Quick search box -->
				<form action="" method="get">
					<input class="" type="text" id="q" name="q" />
				</form>
			</div>
		</div>
		<!-- End of Page title -->

		<!-- Page content -->
		<div id="page">
			<!-- Wrapper -->
			<div class="wrapper">
				<!-- Left column/section -->
				<section class="column width6 first">

					<h3>Form validation example</h3>
					<div class="box box-info">
						All fields are required
					</div>

					<form id="sampleform" method="post" action="#">

						<fieldset>
							<legend>
								JQuery Form Validation
							</legend>

							<p>
								<label class="required" for="firstname">First name:</label>
								<br/>
								<input type="text" id="firstname" class="half" value="" name="firstname"/>
							</p>

							<p>
								<label class="required" for="lastname">Last name:</label>
								<br/>
								<input type="text" id="lastname" class="half" value="" name="lastname"/>
							</p>

							<p>
								<label class="required" for="username">Username:</label>
								<br/>
								<input type="text" id="username" class="half" value="" name="username"/>
								<small>e.g. ui.templates</small>
							</p>

							<p>
								<label class="required" for="password">Password:</label>
								<br/>
								<input type="password" id="password" class="half" value="" name="password"/>
							</p>

							<p>
								<label class="required" for="password_confirm">Confirm password:</label>
								<br/>
								<input type="password" id="password_confirm" class="half" value="" name="password_confirm"/>
							</p>

							<p>
								<label class="required" for="email">Email address:</label>
								<br/>
								<input type="text" id="email" class="half" value="" name="email"/>
							</p>

							<p>
								<label class="required">Date format:</label>
								<br/>
								<input type="radio" id="dateformat1" class="" value="dmy" name="dateformat"/>
								<label class="choice" for="dateformat1">dd/mm/yyyy</label>
								<input type="radio" id="dateformat2" class="" value="mdy" name="dateformat"/>
								<label class="choice" for="dateformat2">mm/dd/yyyy</label>
							</p>

							<p>
								<input type="checkbox" id="terms" class="" value="1" name="terms"/>
								<label class="choice" for="terms">I have read and accept the Terms of Use.</label>
							</p>

							<p class="box">
								<input type="submit" class="btn btn-green big" value="Validate"/>
								or
								<input type="reset" class="btn" value="Reset"/>
							</p>

						</fieldset>

					</form>

					<h3>Form elements</h3>

					<h5>Step 1/6</h5>
					<div id="progress1" class="progress full progress-green">
						<span><b></b></span>
					</div>

					<form id="sampleform2" method="post" action="#" onSubmit="return false;">

						<fieldset>
							<legend>
								Error message
							</legend>
							<div class="box box-error">
								Invalid credit card info
							</div>
							<div class="box box-error-msg">
								<ol>
									<li>
										Credit card number entered is invalid
									</li>
									<li>
										Credit card verification number must be a valid number
									</li>
								</ol>
							</div>
						</fieldset>

						<fieldset>
							<legend>
								Text fields
							</legend>
							<p>
								<label for="input2">Big title:</label>
								<br/>
								<input type="text" id="input2" class="half title" value="" name="input2"/>
								<small>class="half title"</small>
							</p>
							<p>
								<label for="input1">Full textbox:</label>
								<br/>
								<input type="text" id="input1" class="full" value="" name="input1"/>
								<small>class="full"</small>
							</p>
						</fieldset>

						<fieldset>
							<legend>
								Text area
							</legend>
							<p>
								<label for="area1">Small textarea:</label>
								<br/>
								<textarea id="area1" class="small" name="area1"></textarea>
								<small>class="small"</small>
							</p>
							<p>
								<label for="area1">Medium textarea:</label>
								<br/>
								<textarea id="area2" class="medium half" name="area2"></textarea>
								<small>class="medium half"</small>
							</p>
							<p>
								<label for="area1">Large textarea:</label>
								<br/>
								<textarea id="area3" class="large full" name="area3"></textarea>
								<small>class="large full"</small>
							</p>
						</fieldset>

						<fieldset>
							<legend>
								Selections
							</legend>
							<div class="clearfix">
								<div class="column width3 first">
									<p>
										<label>Radio buttons:</label>
										<br/>
										<input type="radio" id="rb1" class="" value="" name="rb"/>
										<label class="choice" for="rb1">Lorem ipsum dolor sit amet</label>
										<br/>
										<input type="radio" id="rb2" class="" value="" name="rb"/>
										<label class="choice" for="rb2">Lorem ipsum dolor sit amet</label>
									</p>
									<p>
										<label for="select1">Single selection:</label>
										<br/>
										<select id="select1" class="half" name="select1">
											<option value="1">Lorem</option>
											<option value="2">Ipsum</option>
											<option value="3">Dolor</option>
											<option value="4">Sit</option>
											<option value="5">Amet</option>
										</select>
									</p>
								</div>
								<div class="column width3">
									<p>
										<label>Check boxes:</label>
										<br/>
										<input type="checkbox" id="cb1" class="" value="" name="cb"/>
										<label class="choice" for="cb1">Lorem ipsum dolor sit amet</label>
										<br/>
										<input type="checkbox" id="cb2" class="" value="" name="cb"/>
										<label class="choice" for="cb2">Lorem ipsum dolor sit amet</label>
									</p>
									<p>
										<label for="select2">Multiple selection:</label>
										<br/>
										<select id="select2" class="half" multiple="multiple" size="6" name="select2">
											<optgroup label="Set 1">
												<option value="1" selected>Lorem</option>
												<option value="2">Ipsum</option>
											</optgroup>
											<optgroup label="Set 2">
												<option value="3">Dolor</option>
												<option value="4">Sit</option>
												<option value="5">Amet</option>
											</optgroup>
										</select>
									</p>
								</div>
							</div>
						</fieldset>

						<fieldset>
							<legend>
								Buttons
							</legend>
							<label>Some combinations</label>
							<p class="">
								<input type="submit" class="btn btn-green big" value="Big green"/>
								<input type="submit" class="btn btn-red" value="Standard red"/>
								or
								<input type="reset" class="btn" value="Simple gray"/>
							</p>
						</fieldset>

					</form>

				</section>
				<!-- End of Left column/section -->

				<!-- Right column/section -->
				<aside class="column width2">
					<div id="rightmenu">
						<header>
							<h3>You might also want to check out...</h3>
						</header>
						<dl class="first">
							<dt><img width="16" height="16" alt="Basic styles" SRC="img/style.png">
							</dt>
							<dd>
								<a HREF="styles.html">Basic styles</a>
							</dd>
							<dd class="last">
								Basic elements and styles
							</dd>

							<dt><img width="16" height="16" alt="Form validation" SRC="img/book.png">
							</dt>
							<dd>
								<a HREF="../../docs.jquery.com/Plugins/Validation">Form validation</a>
							</dd>
							<dd class="last">
								jQuery form validation documentation
							</dd>
						</dl>
					</div>
					<div class="content-box">
						<header>
							<h3>Quick info</h3>
						</header>
						<section>
							<q>A form is an area that can contain form elements.
								Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
								A form is defined with the &lt;form&gt; tag. <cite>w3schools.com</cite></q>
						</section>
					</div>
				</aside>
				<!-- End of Right column/section -->

			</div>
			<!-- End of Wrapper -->
		</div>
		<!-- End of Page content -->

		<!-- Page footer -->
		<footer id="bottom">
			<div class="wrapper">
				<nav>
					<a href="#">Dashboard</a> &middot; <a href="#">Content</a> &middot; <a href="#">Reports</a> &middot; <a href="#">Users</a> &middot; <a href="#">Media</a> &middot; <a href="#">Events</a> &middot; <a href="#">Newsletter</a> &middot; <a href="#">Settings</a>
				</nav>
				<p>
					Copyright &copy; 2010 <b><a HREF="http://www.865171.cn" title="www.865171.cn">www.865171.cn</a></b> | Icons by <a HREF="http://www.865171.cn">865171.cn</a>
				</p>
			</div>
		</footer>
		<!-- End of Page footer -->

		<!-- Animated footer -->
		<footer id="animated">
			<ul>
				<li>
					<a href="#">Dashboard</a>
				</li>
				<li>
					<a href="#">Content</a>
				</li>
				<li>
					<a href="#">Reports</a>
				</li>
				<li>
					<a href="#">Users</a>
				</li>
				<li>
					<a href="#">Media</a>
				</li>
				<li>
					<a href="#">Events</a>
				</li>
				<li>
					<a href="#">Newsletter</a>
				</li>
				<li>
					<a href="#">Settings</a>
				</li>
			</ul>
		</footer>
		<!-- End of Animated footer -->

		<!-- Scroll to top link -->
		<a href="#" id="totop">^ scroll to top</a>

		<!-- User interface javascript load -->
		<script type="text/javascript" SRC="js/administry.js"></script>
	</body>
</html>